<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="lcx">
        <title>简易选项卡</title>
        <script src="jquery-3.1.1.js"></script>
        <style>
            #outer{
                width: 300px;
                height: 30px;
                background-color: black;
                margin: 0 auto;
            }
            ul,li{
                padding: 0;
                margin: 0;
            }
            #outer a{
                text-decoration: none;
                color: white;
                float: left;
                display: block;
                width: 100px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
            .backgroundcolor{
                background-color: #666;
            }
            section{
                width: 298px;
                margin: 0 auto;
               
               
            }
            section ul{
                text-align: left;

               
            }
            section ul li{
                list-style: none;
                text-align: center;
                width: 60px;
                height: 30px;
                line-height: 30px;
                margin-left: 220px;
            }
            section ul:nth-of-type(1){
                 width: 297px;
                 border: 1px solid black;
            }
            section ul:nth-of-type(2){
                 width: 297px;
                 height: 120px;
                 border: 1px solid black;
            }
            section ul:nth-of-type(3){
                 width: 297px;
                 height: 90px;
                 border: 1px solid black;
            }
        </style>
    </head>
    <body>
          <div id="outer">
            <a href="">选项一</a>
            <a href="">选项二</a>
            <a href="">选项三</a>
         </div>
         <section>
          <ul>
              <li>内容1</li>
              <li>内容2</li>
          </ul>
           <ul style="display: none">
              <li>内容1</li>
              <li>内容2</li>
              <li>内容1</li>
              <li>内容2</li>
          </ul>
           <ul style="display: none">
              <li>内容1</li>
              <li>内容2</li>
              <li>内容1</li>
          </ul>
          </section>
    </body>
</html>
<script>
     $(function(){
          $('a').each(function(index){
              $(this).mouseenter(function(){
                 var num = $(this).index();
                 var ul = $($('ul')[num]);
                 ul.css('display','block').siblings().css('display','none');
                $('a').eq(num).addClass('backgroundcolor').siblings().removeClass('backgroundcolor');
             
              })
          })








     })













</script>